<template>
  <div style="padding-top: 20px;height: 80vh">
    <el-form ref="articleRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="描述" prop="content">
        <el-input style="min-height: 30px" type="textarea" v-model="form.content" placeholder="出现BUG的过程" />
      </el-form-item>
      <el-form-item label="照片" prop="img">
        <imageUpload v-model="form.img" limit="8"/>
      </el-form-item>
    </el-form>


    <div style="display: flex; justify-content: center; margin-top: 100px">
      <el-button type="primary"  @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script setup >
import imageUpload from '@/components/articleDetil/ImageUpload/index.vue'
import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";
import {addBug} from "@/api/article.js";
import useUserStore from "@/stores/user.js";
const userStore = useUserStore()
import router from "@/router/index.js"
const userId = userStore.id
const { proxy } = getCurrentInstance();
const data = reactive({
  form: {},
  rules: {},
});
const { form,rules } = toRefs(data);

/** 提交按钮 */
function submitForm() {
  form.value.userId = userId
  addBug(form.value).then(response => {
    proxy.$modal.msgSuccess("提交成功");
    form.value = {}
  })
}
onMounted(()=>{
  if (userId === ''){
    router.push({
      name:"login"
    })
  }
})
</script>

<style scoped>

</style>